import styles from "@pages/personal/styles/styles.module.less";
import GeekIcon from "@shared/geekIcon";
import Slide, { SlideRef } from "@shared/slide";
import { useRef } from "react";
import UpdateAvatar from "@pages/personal/widgets/updateAvatar";

interface Props {
  // 头像地址
  avatar: string;
}

export default function Avatar(props: Props) {
  // 用户获取 Slide 组件实例对象
  const slideRef = useRef<SlideRef | null>(null);
  // 渲染视图
  return (
    <li>
      <span>头像</span>
      <div className={styles.value} onClick={() => slideRef.current?.open()}>
        <div className={styles.avatar}>
          <img src={props.avatar} alt="avatar" />
        </div>
        <Slide ref={slideRef} direction={"toTop"}>
          <UpdateAvatar slideRef={slideRef} />
        </Slide>

        <GeekIcon type="iconbtn_right" className={styles.icon} />
      </div>
    </li>


  );

}

